<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<form id="form2">
	<table width="860px" height="400px" border="0" align="center" cellpadding="2" cellspacing="8" bgcolor="#AEDEF4" style="margin:13px">
		<tr style="height: 50px">
			<td align="center" bgcolor="#E2F7FE">
				<table width="90%" border="0" cellspacing="1" cellpadding="3" id="table1">
					<tr style="height: 50px">
						<td align="right"><strong>矫正单位：</strong></td>
						<td align="left" >
							<input disabled="disabled" :value="cp.jdName" style="width: 100px; height:25px;border: 1px solid #95B8E7;-webkit-border-radius: 5px 5px 5px 5px;"/>
						</td>
						<td align="right"><strong>矫正人员：</strong></td>
						<td align="left"><input disabled="disabled" :value="cp.cpName" style="width:100px; height:25px;border: 1px solid #95B8E7;-webkit-border-radius: 5px 5px 5px 5px;"/></td>
						<td align="right"><strong>证件号码：</strong></td>
						<td align="left"><input disabled="disabled" :value="cp.papersnum" style="width: 180px; height:25px;border: 1px solid #95B8E7;-webkit-border-radius: 5px 5px 5px 5px;"/></td>
					</tr>
				</table>
			</td>
		</tr>
		<tr style="height:150px;" >
			<td align="center" bgcolor="#E2F7FE" style="padding:10px"  valign="top" >
				<table width="90%" border="0" cellspacing="1" cellpadding="3" >
					<tr style="height: 30px">
						<td align="center"><input type="button" value="增加监督人" onclick="addPersonnel()"/></td>
						<td  align="right"><strong>姓名：</strong></td>
						<td  align="left" >
							<input id="pid" data-options="prompt:'请选择监督人员'" style="width: 220px; height: 25px;" />
						</td>
						<td  align="right"><strong>证件号码：</strong></td>
						<td  align="left" >
							<input id="pcard" data-options="prompt:'请选择证件号码'" style="width: 220px; height: 25px;" />
						</td>
					</tr>
				</table>
				<table width="90%" border="1" cellspacing="1" cellpadding="3" id="table2">
					<tr  align="center" style="height: 20px">
						<td><strong>序号</strong></td>
						<td><strong>所属单位</strong></td>
						<td><strong>姓名</strong></td>
						<td><strong>类型</strong></td>
						<td><strong>性别</strong></td>
						<td><strong>联系电话</strong></td>
						<td><strong>职业/职务</strong></td>
						<td><strong>操作</strong></td>
					</tr>
					<tr align="center" style="height: 20px" v-for="(item,index) in pList" >
						<td v-text="index+1"></td>
						<td v-text="item.jdName"></td>
						<td v-text="item.pName"></td>
						<td v-text="item.category"></td>
						<td v-text="item.sex"></td>
						<td v-text="item.phonenum"></td>
						<td v-text="item.profession"></td>
						<td ><input type="button" @click="delPerson(item.pId)" value="删除" style="width:50px"/></td>
					</tr>
					<tr align="center" v-if="pList.length==0">
						<td colspan="8">无 </td>
					</tr>
				</table>
			</td>
		</tr>
		<tr style="height: 150px">
			<td align="center" bgcolor="#E2F7FE" style="padding:10px" valign="top">
				<table width="90%" border="0" cellspacing="1" cellpadding="3" >
					<tr style="height: 30px">
						<td align="center"><input type="button" value="增加监护人" onclick="addGuardian()"/></td>
						<td  align="right"><strong>姓名：</strong></td>
						<td  align="left" >
							<input id="gid" data-options="prompt:'请选择监护人员'" style="width: 220px; height: 25px;" />
						</td>
						<td  align="right"><strong>证件号码：</strong></td>
						<td  align="left" >
							<input id="gcard" data-options="prompt:'请选择证件号码'" style="width: 220px; height: 25px;" />
						</td>
					</tr>
				</table>
				<table width="90%" border="1" cellspacing="1" cellpadding="3" id="table3">
					<tr  align="center" style="height: 20px">
						<td><strong>序号</strong></td>
						<td><strong>姓名</strong></td>
						<td><strong>性别</strong></td>
						<td><strong>职业/职务</strong></td>
						<td><strong>关系名称</strong></td>
						<td><strong>联系电话</strong></td>
						<td><strong>文化程度</strong></td>
						<td><strong>操作</strong></td>
					</tr>
					<tr  align="center" style="height: 20px" v-for="(item,index) in gList" >
						<td v-text="index+1"></td>
						<td v-text="item.name"></td>
						<td v-text="item.sex"></td>
						<td v-text="item.profession"></td>
						<td v-text="item.relation"></td>
						<td v-text="item.phonenum"></td>
						<td v-text="item.degree"></td>
						<td ><input type="button" @click="delGuardian(item.id)" value="删除" style="width:50px"/></td>
					</tr>
					<tr align="center" v-if="gList.length==0">
						<td colspan="8">无 </td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
</form>
<script>
	var vm1=new Vue({
		el:'#table1',
		data:{
			cp:{}
		}
	});
	var vm2=new Vue({
		el:'#table2',
		data:{
			pList:[]
		}
	});
	var vm3=new Vue({
		el:'#table3',
		data:{
			gList:[]
		},
		mounted : function() {
			this.$nextTick(function() {
				this.getGroup();
			});
		},
		methods : {
			getGroup:function(){
				$.ajax({
					url:'get',
					data:'id='+app.editId,
					success:function(res){
						vm1.cp=res.data[0][0];
						if(vm1.cp.pName!=null){
							vm2.pList=res.data[0];
						}
						vm3.gList=res.data[1];
					}
				});
			}
		}
	});
	
	var pid=null;
	$('#pid').combobox({
		url:'${request.contextPath}/personnel/querylike?cid='+app.editId,
		valueField:'id',    
	    textField:'pName',
	    panelHeight:'150px',
		loadFilter:function(res){
	    	$('#pcard').combobox('loadData',res);
	    	return res.data[0].result;
	    },
	    onSelect:function(res){
	    	var url='${request.contextPath}/personnel/querylike?name='+res.pName+'&cid='+app.editId;
	    	pid=res.id;
	    	$('#pcard').combobox('setValue','');
	    	$('#pcard').combobox('reload',url);
	    }
	});
	$('#pcard').combobox({
		valueField:'id',    
	    textField:'card',
	    panelHeight:'150px',
	    loadFilter:function(res){
	    	return res.data[0].result;
	    },
	    onSelect:function(res){
	    	pid=res.id;
	    }
	});
	
	var gid=null;
	$('#gid').combobox({
		url:'${request.contextPath}/guardian/querylike?cid='+app.editId,
		valueField:'id',    
	    textField:'gName',
	    panelHeight:'150px',
		loadFilter:function(res){
	    	$('#gcard').combobox('loadData',res);
	    	return res.data[0].result;
	    },
	    onSelect:function(res){
	    	var url='${request.contextPath}/guardian/querylike?name='+res.gName+'&cid='+app.editId;
	    	gid=res.id;
	    	$('#gcard').combobox('setValue','');
	    	$('#gcard').combobox('reload',url);
	    }
	});
	$('#gcard').combobox({
		valueField:'id',    
	    textField:'card',
	    panelHeight:'150px',
	    loadFilter:function(res){
	    	return res.data[0].result;
	    },
	    onSelect:function(res){
	    	gid=res.id;
	    }
	});
	
	//增加监督人员
	function addPersonnel(){
		if(pid!=null){
			var b=false;
			//遍历监督人员是否已存在
			for(i in vm2.pList)
				if(pid==vm2.pList[i].pId)
					b=true;
			if(!b){
				//可以添加				
				$.ajax({
					url:"${request.contextPath}/personnel/get2?id="+pid,
					success:function(res){
						vm2.pList.push(res.data[0]);
					}	
				});
			}
			
		}
	}
	
	//删除监督人员
	function delPerson(id){
		for(i in vm2.pList){
			if(vm2.pList[i].pId==id){
				vm2.pList.splice(i,1);
				break;
			}
		}
	}
	
	//增加监护人员
	function addGuardian(){
		if(gid!=null){
			var b=false;
			//遍历监督人员是否已存在
			for(i in vm3.gList)
				if(gid==vm3.gList[i].id)
					b=true;
			if(!b){
				//可以添加				
				$.ajax({
					url:"getGuardian?id="+gid,
					success:function(res){
						vm3.gList.push(res.data[0]);
					}	
				});
			}
			
		}
	}

	//删除监护人员
	function delGuardian(id){
		for(i in vm3.gList){
			if(vm3.gList[i].id==id){
				vm3.gList.splice(i,1);
				break;
			}
		}
	}
</script>
</body>
</html>